<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
  <% include("/include/header3.html",{"title":"系统菜单编辑页"}){} %>
  <style>
    .layui-iconpicker .layui-anim {
      min-width: 300px;
    }
  </style>
</head>
<body>

<div id="app">
  <div class="mainBox ">
    <div class="main-container layui-card">
      <div class="layui-card-body">

         <t-form ref="formRef" :data="form" :rules="rules" :disabled="loading" scroll-to-first-error="smooth" colon requiredMark>
           <t-row :gutter="[50,20]">
            <t-col :xs="12" :sm="6">
              <t-form-item label="上级菜单" name="pid">
                <t-tree-select v-model="form.pid" :loading="menuOptions.loading" :data="menuOptions.data" placeholder="请选择上级菜单" clearable
                               @change="changeMenu"></t-tree-select>
              </t-form-item>
            </t-col>
            <t-col :xs="12" :sm="6">
              <t-form-item label="应用分类" name="application">
                <t-select v-model="form.application" :loading="appOptions.loading" :disabled="form.pid!='0'" placeholder="选择所属模块" clearable>
                  <t-option v-for="item in appOptions.data" :label="item.name" :value="item.code"></t-option>
                </t-select>
              </t-form-item>
            </t-col>
            <t-col :xs="12" :sm="6">
              <t-form-item label="菜单名称" name="name">
                <t-input v-model="form.name" placeholder="请输入名称" :maxlength="100" show-limit-number clearable></t-input>
              </t-form-item>
            </t-col>
            <t-col :xs="12" :sm="6">
              <t-form-item label="菜单编码" name="code">
                <t-input v-model="form.code" placeholder="请输入编码" :maxlength="50" show-limit-number clearable></t-input>
              </t-form-item>
            </t-col>
            <t-col :xs="12" :sm="6">
              <t-form-item label="菜单类型" name="type">
                <t-radio-group v-model="form.type">
                  <t-radio label="目录" :value="0"></t-radio>
                  <t-radio label="菜单" :value="1"></t-radio>
                  <t-radio label="按钮" :value="2"></t-radio>
                </t-radio-group>
              </t-form-item>
            </t-col>
            <t-col :xs="12" :sm="6">
              <t-form-item label="图标" name="icon">
                <input id="icon" v-model="form.icon" placeholder="请输入图标" clearable/>
              </t-form-item>
            </t-col>
            <t-col v-if="form.type == 1" :xs="12" :sm="6">
              <t-form-item label="路由地址" name="router">
                <t-input v-model="form.router" placeholder="请输入路由地址" :maxlength="100" show-limit-number clearable></t-input>
              </t-form-item>
            </t-col>
            <t-col v-if="form.type == 1 || form.type == 2" :xs="12" :sm="6">
              <t-form-item label="权限标识" name="permission">
                <t-input v-model="form.permission" placeholder="请输入权限标识" :maxlength="50" show-limit-number clearable></t-input>
              </t-form-item>
            </t-col>
            <t-col :xs="12" :sm="6">
              <t-form-item label="排序" name="sort">
                <t-input-number v-model="form.sort" placeholder="请输入排序" :decimalPlaces="0" :max="99999999" autoWidth></t-input-number>
              </t-form-item>
            </t-col>
            <t-col :xs="12" :sm="6">
              <t-form-item label="状态" name="status">
                <t-select v-model="form.status" placeholder="请选择菜单状态" clearable>
                  <t-option label="启用" :value="1"></t-option>
                  <t-option label="停用" :value="0"></t-option>
                </t-select>
              </t-form-item>
            </t-col>
            <t-col :span="12">
              <t-form-item label="备注" name="remark">
                <t-textarea v-model="form.remake" placeholder="请输入备注" :maxlength="255" show-limit-number clearable></t-textarea>
              </t-form-item>
            </t-col>
          </t-row>
        </t-form>

      </div>
    </div>
  </div>
  <div class="bottom">
    <t-space class="button-container ">
      <t-button :loading="loading" theme="primary" @click="onSave"><i class="layui-icon layui-icon-ok mr-5 text-size-14"></i>保存</t-button>
      <t-button theme="warning" @click="closeBtn.close"><i class="layui-icon mr-5 text-size-14" :class="closeBtn.i"></i>{{closeBtn.t}}</t-button>
    </t-space>
  </div>
</div>

<script>
  const APP_URL = "sys/app/";
  const PATH_URL = "sys/menu/";
</script>

<script>
  setupVue("#app", {
    setup() {
      const LyData = getLayerData();

      init(() => {
        if (LyData && LyData.id) getForm(LyData.id);
        else {
          form.value.pid = LyData.pid || '0';
          form.value.code = LyData.code || '';
          form.value.application = LyData.application;
        }
      })

      let iconPicker;
      layui.use(['iconPicker'], function () {
        iconPicker = layui.iconPicker;
        //初始化图标选择
        iconPicker.render({
          elem: '#icon',
          type: 'fontClass',
          search: true,
          page: true,
          limit: 12,
          click: function (data) {
            form.value.icon = data.icon;
          },
        });
      })

      // 表单相关
      const loading = Vue.ref(false);
      const formRef = Vue.ref(null);
      const form = Vue.ref({
        pid: null,
        name: null,
        code: null,
        type: 0,
        icon: 'layui-icon-circle-dot',
        router: null,
        permission: null,
        application: null,
        sort: null,
        remark: null,
        status: 1,
      });
      const rules = {
        pid: [$required('请选择上级菜单')],
        name: [$required('请输入名称')],
        code: [$required('请输入编码')],
        type: [$required('请输入菜单类型')],
        router: [$required('请输入路由地址')],
        application: [$required('请输入应用分类')],
        sort: [$existRules('请输入数字', 'number')],
        status: [$required('请输入状态')],
      };
      // 获取表单数据
      const getForm = (id) => req(axiosGet, PATH_URL + "getInfo", { id }, (res) => {
        if (res.code === 200) {
          form.value = res.data;
          iconPicker.checkIcon('iconPicker', form.value.icon);
        } else {
          $baseAlert(res.msg, () => closeBtn.value.close());
        }
      }, loading);

      // 上级菜单选项
      const menuOptions = useOptions();
      getSuperior(PATH_URL + "treeOption", { columnField: "id,pid,name,application" }, menuOptions, true);
      const changeMenu = (value, { node }) => {
        if (node.data.application) {
          form.value.application = node.data.application;
        }
      }

      // 系统应用选项
      const appOptions = useOptions();
      req(axiosGet, APP_URL + "list", { status: "1" }, (res) => {
        if (res.code === 200) appOptions.data = res.data;
      }, appOptions.loading);

      // 点击保存
      const onSave = () => {
        formRef.value.validate().then((validateResult) => {
          if (validateResult && Object.keys(validateResult).length) {
            const firstError = Object.values(validateResult)[0]?.[0]?.message;
            $baseMsg(firstError);
          } else {
            let REQ;
            let URL;
            if (form.value.id) {
              REQ = axiosPut, URL = PATH_URL + "update";
            } else {
              REQ = axiosPost, URL = PATH_URL + "add";
            }
            req(REQ, URL, form, (res) => {
              $baseAlert(res.msg, () => {
                if (res.code === 200) closeLayer(parent.reloadData);
              })
            }, loading);
          }
        });
      }

      const closeBtn = useCloseBtn();
      return {
        closeBtn,
        formRef, loading, form, rules,
        onSave,
        menuOptions, changeMenu, appOptions,
      }

    },
  });
</script>


</body>
</html>
